<template>
    <div>
        <vue-esign ref="esign" style="width:100%;height:83vh !important;border-bottom: 1px dashed #c2c1c1;" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
        <!-- <div class="btn">
            <button @click="handleReset">重置</button> -->
        <!-- <button @click="handleGenerate">确定</button> -->
        <div class="esigh-btns">
            <button @click="handleReset">清空画板</button>
            <button @click="handleGenerate">保存图片</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'explain',
        data: function() {
            return {
                lineWidth: 6,
                lineColor: '#000000',
                bgColor: '',
                resultImg: '',
                isCrop: false
            }
        },
        methods: {
            handleReset() { // 清除
                this.$refs.esign.reset()
            },
            handleGenerate() { // 获取base64
                var _this = this
                _this.$refs.esign.generate().then(res => {
                    // 转成文件
                    var blob = _this.dataURLtoBlob(res)
                    var tofile = _this.blobToFile(blob, '签名.jpg')
                    console.log(tofile)
                    setTimeout(async () => {
                        const formData = new FormData()
                        formData.append('file', tofile, tofile.name)
                        formData.append('fileType', 9)
                        // ajax 请求
                        upLoadStandardTimeExcel(formData).then(res => {
                            if (res.data.code == 200) {
                                this.$notify({
                                    title: '提示',
                                    message: '导入成功！',
                                    type: 'success'
                                });
                            } else {
                                this.$notify({
                                    title: '提示',
                                    message: '上传失败',
                                    type: 'warning'
                                });
                            }
                        })
                    })
                }).catch(err => {
                    _this.$toast(err) // 画布没有签字时会执行这里 'Not Signned'
                })
            },
            // 将base64转换为blob
            dataURLtoBlob(dataurl) {
                var arr = dataurl.split(',')
                var mime = arr[0].match(/:(.*?);/)[1]
                var bstr = atob(arr[1])
                var n = bstr.length
                var u8arr = new Uint8Array(n)
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                return new Blob([u8arr], {
                    type: mime
                })
            },
            // 将blob转换为file
            blobToFile(theBlob, fileName) {
                theBlob.lastModifiedDate = new Date()
                theBlob.name = fileName
                return theBlob
            },
        }
    }
</script>

<style scoped>
    .esign {
        max-width: 1000px;
        margin: auto;
        padding: 10px;
    }

    .esigh-btns button {
        color: #fff;
        height: 40px;
        width: 100px;
        font-size: 16px;
        margin-right: 10px;
        outline: none;
        border-radius: 4px;
        background: #F60;
        border: 1px solid transparent;
    }

    .esigh-btns button:active {
        color: #fff;
        box-shadow: 0px 0px 50px orangered inset;
    }

    .esigh-result {
        margin-top: 10px;
    }

    .esigh-result img {
        display: block;
        max-width: 100%;
        height: auto;
        border: 1px solid #ececee;
    }

    .esignature {
        margin: 10px 0;
        border: 2px solid #ccc;
    }
</style>